
new Vue({
	el: '#app',
	data: function () {
		return {
            communityId:'',
            isActive:'',
            dataJSON:{
                title:'良渚文化村',
                count:'0',
                warnCount:'0',
                dangerCount:'0',
                roomName:'房屋号',
                position1:'房间一',
                position2:'房间二',
                position3:'房间三',
            },
            screenList:[
                // {index:'1',elderlyMobile:'13101862545',roomName:'3-1-201',position1:'1001',position2:'1002',position3:'1003',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则', showToopltip:false},
                // {index:'2',elderlyMobile:'15101852875',roomName:'2-1-301',position1:'1002',position2:'1003',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则2',showToopltip:false},
                // {index:'3',elderlyMobile:'16101852545',roomName:'5-1-201',position1:'1002',position2:'1001',position3:'1003',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则3',showToopltip:false},
                // {index:'4',elderlyMobile:'17101852545',roomName:'7-1-201',position1:'1002',position2:'1003',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则4',showToopltip:false},
                // {index:'5',elderlyMobile:'18101852545',roomName:'5-5-201',position1:'1003',position2:'1002',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则5',showToopltip:false},
                // {index:'6',elderlyMobile:'19101852541',roomName:'3-1-401',position1:'1003',position2:'1002',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则6',showToopltip:false},
                // {index:'7',elderlyMobile:'15101852542',roomName:'3-1-501',position1:'1003',position2:'1001',position3:'1002',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则7',showToopltip:false},
                // {index:'8',elderlyMobile:'15101854543',roomName:'3-1-601',position1:'1001',position2:'1002',position3:'1003',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则8',showToopltip:false},
                // {index:'9',elderlyMobile:'15101858445',roomName:'2-1-701',position1:'1003',position2:'1001',position3:'1002',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则9',showToopltip:false},
                // {index:'10',elderlyMobile:'15101872545',roomName:'2-1-201',position1:'1003',position2:'1001',position3:'1003',warningReason1: '预警规则12',warningReason2: '预警规则12',warningReason3: '预警规则10',showToopltip:false}
            ],
            swiperAuto:'',
            autoplay:{
                delay:150,
                autoplayDisableOnInteraction:true
            },
            showToopltip:false,
            loop:true,
            slidesPerView:10,
            list:[],
            fullscreenLoading:false,
            requestHeaders:'',
            healthPopup:false,
            popupInfo:{
                mobile:'',
                step:'',
                heartBeat:'',
                bloodPressure:'',
                wristTemperature:'',
                bodyTemperature:'',
                braceletAntiTamperName:'',
            }
		}
	},
	created() {
        var localStorageCommunityId=JSON.parse(localStorage.getItem('hc_currentCommunityInfo'))
        if(localStorageCommunityId){
            this.communityId=localStorageCommunityId.communityId?localStorageCommunityId.communityId:this.getUrlParam("communityId");
        }else{
            this.communityId=this.getUrlParam("communityId");
        }
        // console.log(this.localStorageCommunityId,this.headers);
        var that=this;
        that.requestHeaders=getRequestHeaders('00',this.communityId);//获取请求头
        // console.log(that.requestHeaders)
        // that.fullscreenLoading = true;
        that.initReportData();
        setInterval(function(){
            // that.fullscreenLoading = true;
           
            that.initReportData();
        },5000)
    },
	mounted(){

        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 1024) {
                        docEl.style.fontSize = 120 * (clientWidth / 1920) + 'px';
                    }
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
        var isSandscape=this.getUrlParam("sandscape");//H5通过旋转实现横屏
        // 直接在最外层的div调用该函数即可
        if(isSandscape && isSandscape=='sandscape' && this.browserVersions()==true){
            this.changeOrientation($('.big_screen_big'));
        }
	},
	methods: {
        activeLi(item){
            this.isActive=item.index;
        },
        clickIcon(){
            
        },
        changeOrientation($print){
            var width = document.documentElement.clientWidth;
            var height =  document.documentElement.clientHeight;
            $print.addClass('isSandscape');
            $print.parents().addClass('isSandscapebox');
            var that=this;
            var h=((height-width)/2).toFixed(0);
            if( width < height ){
                console.log('竖屏')
                // 竖屏
                // $print.width('100vh');
                // $print.height('100vw');
                $print.css({
                    'width':'100vh',
                    'height':'100vw',
                    'position':'absolute',
                    'top':(height-width)/2,
                    'left':0-h,
                    'transform':'rotate(90deg)',
                    'transform-origin':'50% 50%',
                });
                // $print.css('position', 'absolute');
                // $print.css('top',  (height-width)/2 );
                // $print.css('left',  0-h);
                // $print.css('transform' , 'rotate(90deg)');
                // $print.css('transform-origin' , '50% 50%');
            } 
            var evt = "onorientationchange" in window ? "orientationchange" : "resize";
            
            window.addEventListener(evt, function() {
                setTimeout( function(){
                    var width = document.documentElement.clientWidth;
                    var height =  document.documentElement.clientHeight;
                    if( width > height ){
                        // 横屏
                        console.log('横屏')
                        $print.width(width);
                        $print.height(height);
                        $print.css('top',  0 );
                        $print.css('left',  0 );
                        $print.css('transform' , 'none');
                        $print.css('transform-origin' , '50% 50%');
                    }
                    else{
                        console.log('竖屏')
                        // 竖屏
                        $print.width('100vh');
                        $print.height('100vw');
                        $print.css('position', 'absolute');
                        $print.css('top',  (height-width)/2 );
                        $print.css('left',  0-(height-width)/2 );
                        $print.css('transform' , 'rotate(90deg)');
                        $print.css('transform-origin' , '50% 50%');
                    } 
                } , 300 );
            }, false);
        },
        initReportData(){
            let url=window.location.protocol+'//'+window.location.host+'/app/report.elderAlertReport';
            let params={
                "encStoreId" : this.getUrlParam("encStoreId"),
                "storeId":this.getUrlParam("storeId"),
                "id" : this.getUrlParam("id")
            }
            var that=this;
            $.ajax({
                url : url,
                type: 'POST',
                dataType:'json',
                // contentType: 'text/plain',
                contentType: 'application/json',
                headers:that.requestHeaders,
                data: JSON.stringify(params),
                success : function (res){
                    // console.log(res)
                    var warnCount=0;
                    var dangerCount=0;
                 
                    // res.details=[  
                    //     {index:'1',elderlyMobile:'13101862545',roomName:'3-1-201',position1:'1001',position2:'1002',position3:'1003',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则', showToopltip:false,latitude:'30.2398847',longitude:'120.2055672'},
                    //     {index:'2',elderlyMobile:'15101852875',roomName:'2-1-301',position1:'1001',position2:'1002',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则2',showToopltip:false,latitude:'30.2398847',longitude:'120.2055672'},
                    //     {index:'3',elderlyMobile:'16101852545',roomName:'5-1-201',position1:'1002',position2:'1001',position3:'1003',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则3',showToopltip:false,latitude:'30.2398847',longitude:'125.2055672'},
                    //     {index:'4',elderlyMobile:'17101852545',roomName:'7-1-201',position1:'1002',position2:'1003',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则4',showToopltip:false},
                    //     {index:'5',elderlyMobile:'18101852545',roomName:'5-5-201',position1:'1003',position2:'1002',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则5',showToopltip:false},
                    //     {index:'6',elderlyMobile:'19101852541',roomName:'3-1-401',position1:'1003',position2:'1002',position3:'1001',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则6',showToopltip:false},
                    //     {index:'7',elderlyMobile:'15101852542',roomName:'3-1-501',position1:'1003',position2:'1001',position3:'1002',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则7',showToopltip:false},
                    //     // {index:'8',elderlyMobile:'15101854543',roomName:'3-1-601',position1:'1001',position2:'1002',position3:'1003',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则8',showToopltip:false},
                    //     // {index:'9',elderlyMobile:'15101858445',roomName:'2-1-701',position1:'1003',position2:'1001',position3:'1002',warningReason1: '预警规则11',warningReason2: '预警规则32',warningReason3: '预警规则9',showToopltip:false},
                    //     // {index:'10',elderlyMobile:'15101872545',roomName:'2-1-201',position1:'1003',position2:'1001',position3:'1003',warningReason1: '预警规则12',warningReason2: '预警规则12',warningReason3: '预警规则10',showToopltip:false}
                    // ];
                    if (typeof(res.details) !== "undefined") {
                        that.list=[];
                        for(j = 0,len=res.details.length; j < len; j++) {
                            var data = res.details[j];
                           // console.log(JSON.stringify(data));
                            that.list.push({
                                index: j+1,
                                elderlyMobile:data.elderlyMobile,
                                roomId:data.roomId,
                                roomName: data.roomName,
                                position1: data.position1,
                                position2: data.position2,
                                position3: data.position3,
                                warningReason1: data.warningReason1,
                                warningReason2: data.warningReason2,
                                warningReason3: data.warningReason3,
                                latitude:data.latitude,
                                longitude:data.longitude,
                            });
                            if(data.position1=='1001'){
                                warnCount++;
                            }
                            if(data.position2=='1001'){
                                warnCount++;
                            }
                            if(data.position3=='1001'){
                                warnCount++;
                            }
                            if(data.position1=='1002'){
                                dangerCount++;
                            }
                            if(data.position2=='1002'){
                                dangerCount++;
                            }                        
                            if(data.position3=='1002'){
                                dangerCount++;
                            }
                        } 
                    }
                    if (typeof(res.header) !== "undefined") {
                        that.dataJSON.roomName = res.header.roomName;
                        that.dataJSON.position1 = res.header.position1;
                        that.dataJSON.position2 = res.header.position2;
                        that.dataJSON.position3 = res.header.position3;
                    }
                    setTimeout(() => {
                        // that.fullscreenLoading = false;
                        var h=that.$refs.itemLi[0].offsetHeight;
                    }, 500);

                    that.screenList=that.list;
                    // console.log( that.screenList)
                    var screenListLength= that.screenList.length;   
                    that.dataJSON.count = screenListLength;
                    that.dataJSON.warnCount = warnCount;
                    that.dataJSON.dangerCount= dangerCount;          
                   
                    // console.log(screenListLength)
                    if(screenListLength <= 6){
                        that.loop=false;
                        that.autoplay=false;
                    }else{
                        that.loop=true;
                        that.autoplay={
                            delay:1000,
                            autoplayDisableOnInteraction:true
                        }
                    }
                    that.$nextTick(function(){
                        that.swiperAuto = new Swiper('.swiper-container', {
                            notNextTick: true,
                            slidesPerView:10,
                            direction: 'vertical',
                            speed:1000,//滚动速度
                            setWrapperSize: false,
                            freeMode:false,//true则是自由模式，不会自动贴合滑动位置
                            autoplay:that.autoplay,
                            loop:that.loop,//循环
                        });
                    })

                },
                error:function(res){
                    console.log(res)
                    that.$message({duration:3000,message:res.responseText});
                }
            })
        },
        redirectMap(latitude,longitude){
            // latitude='30.246172';
            // longitude='120.211797';//百度中获取的经纬度

            // latitude='30.240242';
            // longitude=' 120.205783';//高德api中 例子中获取的经纬度

            // latitude='30.23975';
            // longitude='120.2054';//使用高德api 定位中拿到的经纬度
            var urlMap='http://uri.amap.com/marker?position='+longitude+','+latitude+'&src=mypage&coordinate=gaode&callnative=0'; //高德地图
            console.log(urlMap)
            // location.href=urlMap;
            window.open(urlMap);
        },
        getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); //匹配目标参数
            if (r != null) return unescape(r[2]);
            return null; //返回参数值
        },
        browserVersions(){
            var ua = navigator.userAgent; /* navigator.userAgent 浏览器发送的用户代理标题 */
            if (ua.indexOf('Android') > -1 || ua.indexOf('iPhone') > -1 || 
                ua.indexOf('iPad') > -1 || ua.indexOf('Symbian') > -1 ||
                ua.indexOf('BlackBerry') > -1){
                return true;　
            }else{
                return false;
        　　}
        },
        healthData(roomId,elderlyMobile){
            console.log(roomId,elderlyMobile)
            this.popupInfo.mobile=elderlyMobile;
            this.healthPopup=true;
            // this.swiperAuto.autoplay.stop();
            let url=window.location.protocol+'//'+window.location.host+'/app/deviceLogsHealthInfo.listDeviceLogsHealthInfo';
            let params={
                "roomId" : roomId,
            }
            var that=this;
            that.popupInfo.step=0
            that.popupInfo.heartBeat=''
            that.popupInfo.bloodPressure=''
            that.popupInfo.wristTemperature=''
            that.popupInfo.bodyTemperature=''
            that.popupInfo.braceletAntiTamperName=''
            $.ajax({
                url : url,
                type: 'POST',
                dataType:'json',
                // contentType: 'text/plain',
                contentType: 'application/json',
                headers:that.requestHeaders,
                data: JSON.stringify(params),
                success : function (res){
                    console.log(res)
                    if(res.code=='0000'){
                        if(res.data.length>0){
                            var data=res.data[0].healthInfos[0];
                            that.popupInfo.step=data.steps;
                            that.popupInfo.heartBeat=data.heartBeat;
                            that.popupInfo.bloodPressure=data.bloodPressure;
                            that.popupInfo.wristTemperature=data.wristTemperature;
                            that.popupInfo.bodyTemperature=data.bodyTemperature;
                            that.popupInfo.braceletAntiTamperName=data.braceletAntiTamperName;
                        }
                    }else{
                        that.popupInfo.step=0
                        that.popupInfo.heartBeat=''
                        that.popupInfo.bloodPressure=''
                        that.popupInfo.wristTemperature=''
                        that.popupInfo.bodyTemperature=''
                        that.popupInfo.braceletAntiTamperName=''
                    }

                },
                error:function(res){
                    that.popupInfo.step=0
                    that.popupInfo.heartBeat=''
                    that.popupInfo.bloodPressure=''
                    that.popupInfo.wristTemperature=''
                    that.popupInfo.bodyTemperature=''
                    that.popupInfo.braceletAntiTamperName=''
                    that.$message({duration:3000,message:res.responseText});
                }
            })

        },
        closeHealthPopup(){
            this.healthPopup=false;
        }
	}
});
